<template>
  <view class="body-content">
    <view class="page-header">
      <view class="page-main header-con">
        <view class="con-top">
          <view class="top-user">
            <image class="user-pic" mode="aspectFill" :src="info.avatar"></image>
            <view class="user-info">
              <view class="info-name">{{ info.nickname }}</view>
              <view class="info-phone">{{ info.mobile }}</view>
            </view>
          </view>
          <navigator url="/pages/revenueRecord/revenueRecord">
            <view class="top-vip">
              <view class="vip-icon">
                <image class="icon-pic" src="/static/img/money.png"></image>
              </view>
              <view class="vip-text">去提现</view>
            </view>
          </navigator>
        </view>
        <view class="con-data">
          <view class="data-item">
            <view class="item-num">{{ info.total_rebate || '0.00' }}</view>
            <view class="item-title">已省</view>
          </view>
          <view class="data-item">
            <view class="item-num">{{ info.recorded || '0.00' }}</view>
            <view class="item-title">待入账</view>
          </view>
          <view class="data-item">
            <view class="item-num">{{ info.able_rebate || '0.00' }}</view>
            <view class="item-title">余额</view>
          </view>
        </view>
      </view>
      <navigator url="/pages/member/member">
        <image class="page-main header-pic" mode="widthFix" src="@/static/img/vipEntrance.png"></image>
      </navigator>
    </view>
    <view class="page-team">
      <view class="page-main team-con">
        <view class="con-top">
          <view class="top-title">
            <span>我的团队</span>
            <span>（{{ team.total_num || '0' }}人）</span>
          </view>
          <navigator url="/pages/inviteDetails/inviteDetails">
            <view class="con-more">
              <view class="more-title">今日新增{{ team.today_num || '0' }}人</view>
              <image class="more-icon" mode="heightFix" src="/static/img/rightjt.png"></image>
            </view>
          </navigator>
        </view>
        <view class="con-data">
          <view class="data-item">
            <view class="item-title">今日收益（元）</view>
            <view class="item-num">{{ team.today_commission || '0.00' }}</view>
          </view>
          <view class="data-item">
            <view class="item-title">累计收益（元）</view>
            <view class="item-num">{{ info.total_commission || '0.00' }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="page-team">
      <view class="page-main team-con">
        <view class="con-top">
          <view class="top-title">
            <span>相关服务</span>
          </view>
        </view>
        <view class="con-list">
          <!-- <navigator url="/pages/payCode/payCode" class="item">
            <view class="list-item">
              <image class="item-pic" mode="aspectFill" src="@/static/img/my/icon1.png"></image>
              <view class="item-title">收款管理</view>
            </view>
          </navigator> -->
          <navigator url="/pages/changePhone/changePhone" class="item">
            <view class="list-item">
              <image class="item-pic" mode="aspectFill" src="@/static/img/my/icon2.png"></image>
              <view class="item-title">{{ info.mobile ? '更换手机' : '绑定手机' }}</view>
            </view>
          </navigator>
<!--          <navigator url="/pages/application/application" class="item" v-if="!share || (share.status=='verifing' || share.status=='hidden')">
            <view class="list-item">
              <image class="item-pic" mode="aspectFill" src="@/static/img/my/icon4.png"></image>
              <view class="item-title">分销申请</view>
            </view>
          </navigator> -->
          <navigator url="/pages/shareCode/shareCode" open-type="switchTab" class="item">
            <view class="list-item">
              <image class="item-pic" mode="aspectFill" src="@/static/img/my/icon3.png"></image>
              <view class="item-title">分享赚钱</view>
            </view>
          </navigator>
<!--          <navigator url="/pages/settlement/settlement" class="item">
            <view class="list-item">
              <image class="item-pic" mode="aspectFill" src="@/static/img/my/icon5.png"></image>
              <view class="item-title">商家入驻</view>
            </view>
          </navigator> -->
          <navigator url="/pages/problemList/problemList" class="item">
            <view class="list-item">
              <image class="item-pic" mode="aspectFill" src="@/static/img/my/icon6.png"></image>
              <view class="item-title">帮助中心</view>
            </view>
          </navigator>
          <navigator url="/pages/bugFeedback/bugFeedback" class="item">
            <view class="list-item">
              <image class="item-pic" mode="aspectFill" src="@/static/img/my/icon7.png"></image>
              <view class="item-title">BUG反馈</view>
            </view>
          </navigator>
          <navigator url="/pages/feedback/feedback" class="item">
            <view class="list-item">
              <image class="item-pic" mode="aspectFill" src="@/static/img/my/icon8.png"></image>
              <view class="item-title">投诉建议</view>
            </view>
          </navigator>
          <view class="list-item" @click="logout">
            <image class="item-pic" mode="aspectFill" src="@/static/img/my/icon9.png"></image>
            <view class="item-title">退出登录</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">
</script>
<script>
import myKefu from '../../pages/publicService/publicService.vue';
import {
  getUserIndex,
  logout
} from '../../apirequest/api.js';

export default {
  data() {
    return {
      vip: [],
      info: [],
      team: [],
      share: [],
    }
  },
  onShow: function () {
    this.loadData();
  },
  methods: {
    //退出登录
    logout: function () {
      var that = this;
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗?',
        success(ret) {
          if (ret.confirm) {
            logout({}).then((res) => {
              if (res.code == 1) {
                uni.showToast({
                  title: res.msg,
                  icon: 'success'
                });
                setTimeout(function () {
                  uni.setStorageSync('token', '');
                  uni.switchTab({
                    url: '/pages/index/index'
                  })
                }, 1000);
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: 'error'
                })
              }
            })
          }
          if (ret.cancel) {

          }
        }
      });
    },
    gotoMember: function () {
      uni.navigateTo({
        url: '/pages/member/member'
      })
    },
    //获取数据
    loadData: function () {
      getUserIndex({}).then((res) => {
        console.log('res', res)
        if (res.code == 1) {
          this.vip = res.data.vip;
          this.info = res.data.info;
          this.team = res.data.team;
          this.share = res.data.share;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "error"
          })
          setTimeout(function () {
            uni.navigateBack({
              delta: 0
            });
          }, 1000)
        }
      }).catch(err => {
        console.log(err)
      })

    },
    record(e) {
      uni.navigateTo({
        url: '/pages/revenueRecord/revenueRecord'
      })
    },
  }
}
</script>

<style scoped lang="scss">
.page-main {
  box-sizing: border-box;
  width: 90%;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 40rpx -10rpx rgba(0, 0, 0, 0.2);
}

.page-header {
  position: relative;
  padding-top: 40rpx;

  &:before {
    content: '';
    width: 100%;
    height: 70%;
    position: absolute;
    background-image: linear-gradient(#ff8546 30%, #ffb130 50%, transparent);
    top: 0;
  }

  .header-con {
    position: relative;
    z-index: 1;
    padding: 40rpx 0;

    .con-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: -10rpx;

      .top-user {
        width: 50%;
        padding: 0 40rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .user-pic {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;
        }

        .user-info {
          margin-left: 20rpx;
          font-size: 28rpx;
          color: #999999;

          .info-name {
            font-size: 34rpx;
            font-weight: bold;
            color: #333333;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all;
          }
        }
      }

      .top-vip {
        flex-shrink: 0;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;

        .vip-icon {
          width: 60rpx;
          height: 60rpx;
          margin-right: -20rpx;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background-image: linear-gradient(to right, #ff8546, #ffb130);
          border-radius: 50%;
          position: relative;
          z-index: 1;

          .icon-pic {
            width: 70%;
            height: 70%;
          }
        }

        .vip-text {
          padding: 10rpx 40rpx;
          background-image: linear-gradient(to right, #ff8546, #ffb130);
          border-right: none;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }

    .con-data {
      margin: 30rpx 0 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      position: relative;
      z-index: 1;

      .data-item {
        text-align: center;
        font-size: 28rpx;
        color: #999999;
        position: relative;

        &:before {
          content: '';
          width: 2rpx;
          height: 60%;
          background-color: #eeeeee;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(-50%, -50%);
        }

        &:last-child {
          &:before {
            content: none;
          }
        }

        .item-num {
          font-weight: bold;
          color: #333333;
          font-size: 34rpx;
        }
      }
    }
  }
  .header-pic {
    position: relative;
    display: block;
    z-index: 0;
    margin-top: -30rpx;
  }
}

.page-team {
  margin: 30rpx auto;
  .team-con {
    padding: 30rpx;
    .con-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      color: #cccccc;
      .top-title {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
      }
      .con-more {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .more-icon {
          height: 30rpx;
          margin-left: 10rpx;
        }
      }
    }
    .con-data {
      margin-top: 30rpx;
      color: #666666;
      font-size: 28rpx;
      display: grid;
      grid-template-columns: repeat(2,1fr);
      grid-gap: 20rpx;
      .data-item {
        text-align: center;
        padding: 20rpx;
        background-color: #f7f7f7;
        .item-num {
          font-size: 40rpx;
          font-weight: bold;
          color: #333333;
          margin-top: 10rpx;
        }
      }
    }
    .con-list {
      margin-top: 30rpx;
      display: grid;
      grid-gap: 20rpx;
      grid-template-columns: repeat(4,1fr);
      .list-item {
        text-align: center;
        color: #333333;
        font-size: 28rpx;
        .item-pic {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 8rpx;
        }
      }
    }
  }
}
</style>